<template>
	<view class="wf-item-page" @tap="goto"
		:data-url="'/activity/shortvideo/detail?id=' + item.videoId +'&cid='+config.category">
		<image :src="item.coverimg" mode="widthFix" class="item-img" />
		<view class="item-info">
			<image v-if="config.showlogo==1" :src="item.logo" mode="aspectFill" class="info-avatar" />

			<view class="icon" v-if="config.showviewnum==1">
				<image class="tubiao" src="/static/img/shortvideo_playnum.png" />
				{{item.view_num}}
			</view>
			<view class="icon" v-if="config.showzannum==1">
				<image class="tubiao" src="/static/img/shortvideo_likenum.png" />{{item.zan_num}}
			</view>
			<!-- <view class="info-nickname">{{ item.description }}</view> -->





		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				require: true
			},
			config: {
				type: Object,
				require: true
			},

		},
		methods: {
			goto: function(e) {
				getApp().goto(e.currentTarget.dataset.url, e.currentTarget.dataset.opentype)
			},
		}
	}
</script>

<style lang="less" scoped>
	.wf-item-page {
		background: #fff;
		overflow: hidden;
		border-radius: 5px;
	}

	.item-img {
		width: 100%;
		border-radius: 5px 5px 0 0;
	}

	.item-info {
		display: flex;
		align-items: center;
		padding: 10rpx;
		gap: 20rpx;
		/*background-color: #eaeaea;*/
		position: relative;
		top: -7rpx;
	}

	.info-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.icon {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		gap: 10rpx
	}


	.tubiao {
		height: 25rpx;
		width: 25rpx;
	}

	.info-nickname {
		font-size: 12px;
		color: #333;
	}
</style>